table 태그
✒️ 2025-05-16 11:09 내용 수정
- block 요소이고, 웹페이지에서 표를 만드는 요소다.
| 태그 | 속성 | 설명 |
|---|---|---|
<table> |
Table, 표를 나타내는 태그 | |
border="size" |
선 두께가 size인 경계를 설정 | |
<tr> |
Table Row, 데이터의 행 | |
<td> |
Table Data, 데이터의 열 | |
colspan="num" |
행이 차지할 열 개수를 설정 여러 열에 걸쳐 셀이 병합됨 |
|
rowspan="num" |
열이 차지할 행 개수를 설정 여러 행에 걸쳐 셀이 병합됨 |
|
align="center" |
행 요소 정렬을 설정, 옵션은 center, left, right | |
<th> |
Table Header, 테이블 헤더 | |
| 테이블의 각 열을 대표하는 셀 | ||
<thead> |
테이블의 헤더 부분을 정의, 첫번째 행에 위치 | |
<tbody> |
테이블의 헤더와 푸터 사이 부분을 정의 | |
<tfoot> |
테이블의 푸터 부분을 정의, 마지막 행에 위치 | |
<caption> |
표 제목을 작성할 때 사용. 표 상단 중앙에 표시됨 | |
<colgroup> |
열 그룹 생성 | |
<col> |
테이블의 각 열 묶음. colgroup의 하위 태그로 종료 태그 없음 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<tr>
<td>1행1열</td>
<td>1행2열</td>
</tr>
<tr>
<td>2행1열</td>
<td>2행2열</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<td colspan="3" align="center">태그</td>
</tr>
<tr>
<td>table태그</td>
<td>tr태그</td>
<td>td태그</td>
</tr>
</table>
<hr>
<table border="2">
<tr>
<td rowspan="4" align="center">태그</td>
</tr>
<tr>
<td>table태그</td>
</tr>
<tr>
<td>tr태그</td>
</tr>
<tr>
<td>td태그</td>
</tr>
</table>
</body>
</html>
